<template>
	<view class="page-container">
		<scroll-view scroll-y="true" class="scroll-view">
			<view v-if="downloadList.length==0" class="empty-state">
				<image src="/static/empty-download.png" class="empty-img"/>
				<text class="empty-text">暂无下载内容</text>
				<button class="primary-btn" @click="gotoFind()">去发现视频</button>
			</view>
			
			<view class="card-list">
				<view 
					v-for="(item, index) in downloadList" 
					:key="index" 
					class="download-card"
					@click="gotoPlay(item)">
					<image 
						:src="item.imgSrc" 
						class="card-image"
						mode="aspectFill" 
						lazy-load
						:threshold="300"/>
					<view class="card-content">
						<text class="card-title">{{item.title}}</text>
						<button 
							class="delete-btn" 
							@click.stop="deleteDownload(item)"
							hover-class="btn-hover">
							<uni-icons type="trash" size="20" color="#ff4444"/>
						</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				downloadList:[]
			}
		},
		methods: {
			gotoPlay(video){
				uni.navigateTo({
					url:'/pages/play/play?playID='+video.videoId
				})
			},
			deleteDownload(download){
				uni.showModal({
				  title: '删除下载',
				  content: '确定删除这个下载吗？',
				  success: (res) => {
				    if (res.confirm) {
				      uni.removeSavedFile({
				      	filePath:download.imgSrc
				      })
				      uni.removeSavedFile({
				      	filePath:download.videoSrc
				      })
				      const index = this.downloadList.findIndex(i => i.videoId === download.videoId);
				      this.downloadList.splice(index,1);
				      uni.setStorageSync("downloadList", JSON.stringify(this.downloadList));
				      this.downloadList=JSON.parse(uni.getStorageSync("downloadList") || "[]");
				    }
				  }
				})
				
			},
			gotoFind(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
		mounted() {
			this.downloadList=JSON.parse(uni.getStorageSync("downloadList") || "[]");
		}
	}
</script>

<style lang="scss">
.page-container {
	background: #f5f5f5;
	min-height: 100vh;
	
	/* 隐藏滚动条（网页7/9） */
	.scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

.empty-state {
	padding-top: 200rpx;
	text-align: center;
	.empty-img {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 40rpx;
	}
	.empty-text {
		display: block;
		color: #999;
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	.primary-btn {
		width: 240rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #1E88E5;
		color: white;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}

.card-list {
	padding: 20rpx;
	.download-card {
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
		
		.card-image {
			width: 100%;
			height: 400rpx;
			display: block;
		}
		
		.card-content {
			padding: 24rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.card-title {
				flex: 1;
				font-size: 30rpx;
				color: #333;
				line-height: 1.4;
			}
			
			.delete-btn {
				width: 80rpx;
				height: 80rpx;
				background: rgba(255,68,68,0.1);
				border-radius: 50%;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s;
				
				&.btn-hover {
					background: rgba(255,68,68,0.2);
				}
			}
		}
	}
}
</style>
